MEMPERLEBAR HALAMAN TEMPLATE

Mungkin para sobat yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template tersebut hingga menjadi lebih lebar? Tapi Bagaimana caranya ??? Jangan bingung, gampang koq.

Agar tidak terlalu membingungkan, saya ambil contoh template minima. Bagi yang menggunakan template selain template minima ga usah bingung isinya g jauh beda koq. Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika sobat tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat.

Ada Beberapa hal yang harus diketahui sebelum kita merubah tampilan emplate. Biasanya template itu terdiri dari beberapa bagian yaitu:

• Outer-wreper : Lebar template secara keseluruhan


• Main-wrapper: Bagian dimana kita biasa posting artikel


• Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper


• Header- wrapper: Bagian paling atas dari template


• Footer-wrapper : Dasar atau berada paling bawah

Nah biar ga pusing langsung aja sekarang masuk ke blog sobat, klik tata letak kemudian edit html. Pada edit html sobat, Expand template widgetnya jangs di kasih tanda centang, diemin ajah....
Kemudian cari code sebagai berikut:




#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */



Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 660px adalah nilai lebar yaitu sebesar 600 pixel.
Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :




#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */




Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:


Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper


#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;


Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.
Selamat mencoba...!!!

Balik lagi ke Atas yuk...